<template>
  <div class="container">
    <el-card class="box-card">
      <el-row>
        <el-col :span="12">
          <div class="login-text">账号密码登录</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="form" label-width="0px" :rules="loginFormRules">
            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" v-model="form.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item class="btn">
              <el-button type="primary" @click="onSubmit">登录</el-button>
              <el-button @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-divider content-position="center">其它登录方式</el-divider>
      <el-row>
        <el-col :span="5">
          <img :src="require('../assets/wechat.png')" style="width: 50px; height: 50px" class="image">
          <div style="padding-top: 5px;">
            <span style="font-size: 12px;">微信登录</span>
          </div>
        </el-col>
        <el-col :span="5">
          <el-image :src="require('../assets/phone.png')" style="width: 50px; height: 50px"></el-image>
          <div style="padding-top: 5px;">
            <span style="font-size: 12px;">手机登录</span>
          </div>
        </el-col>
        <el-col :span="5">
          <el-image :src="require('../assets/qq.png')" style="width: 50px; height: 50px"></el-image>
          <div style="padding-top: 5px;">
            <span style="font-size: 12px;">QQ登录</span>
          </div>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        loginFormRules: {
          username: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入用户密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 8,
              message: '长度在 3 到 8 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate(async valid => {
          if (!valid) return
          const {
            data: res
          } = await this.$axios.post('/login', this.form)
          if (JSON.parse(res).code != 200)
            return this.$message.error('用户名或密码错误')
          sessionStorage.setItem("apikey", JSON.parse(res).result.apikey)
          this.$router.push('/home')
        })
      },
      resetLoginForm() {
        this.$refs.form.resetFields()
      }
    }
  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
    background: url(../assets/background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
  }

  .box-card {
    width: 400px;
    position: absolute;
    left: 70%;
    top: 60%;
    transform: translate(-50%, -60%);
  }

  .btn {
    text-align: center;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .el-row {
    display: flex;
    justify-content: space-around;
  }

  .login-text {
    font-size: 22px;
    color: #666;
    font-weight: 700;
    margin: 10px 0px 25px;
  }
</style>
